<template>
  <div class="home">
    <!-- 定义页面的解构 -->
    <!-- 顶部导航栏 -->
    <div class="header">
      <p>购物平台</p>
      <!-- 顶部轮播区域 -->
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" :height="180" indicator-color="white">
          <van-swipe-item v-for="(swipe,index) in swipeData" :key="index">
            <img :src="swipe.url" alt="寄" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 搜索框 -->
    <div class="search">
      <van-search v-model="queryInfo.query" shape="round" show-action placeholder="请输入商品名称关键词" @search="onSearch">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <!-- 菜单栏 -->
    <div class="menu">
      <div class="title">商品分类</div>
      <van-grid :column-num="2" icon-size="145px" :border="false" :gutter="20" :square="true">
        <van-grid-item
          v-for="(category,index) in categoryData"
          :key="category.cat_id"
          :icon="category.cat_icon == '' || !category.cat_icon?cat_icon:category.cat_icon"
          :text="category.cat_name"
          @click="jumpPS(category.cat_id,category.cat_name,index)"
        />
      </van-grid>
    </div>
    <!-- 底部产品展示区域 -->
    <!-- <div class="product">
      <van-card
        v-for="product in productData"
        :key="product.id"
        :price="product.price + '.00'"
        :desc="product.description"
        :title="product.name"
        :thumb="product.photo"
      />
    </div>-->
    <div class="loading">
      <van-loading v-show="loading" size="50px" text-size="20px" vertical>加载中...</van-loading>
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
// 引入axios
import { get } from '@/http/axios'
// 引入vuex的辅助函数
import { mapActions, mapState } from 'vuex'
import { Toast } from 'vant';
export default {
  data() {
    return {
      // 轮播图数组
      swipeData: [
        { url: require("@/assets/swipe1.png") },
        { url: require("@/assets/swipe2.png") },
        { url: require("@/assets/swipe3.png") },
        { url: require("@/assets/swipe4.png") },
      ],
      categoryData: [],
      cat_icon: 'http://127.0.0.1:8888/tmp_uploads\\0de02538840f46310d344a883a5ec930.png',
      loading: false,
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10000
      },
    }
  },
  computed: {
    // 引入栏目数据
    // ...mapState('category', ['categoryData']),
    // ...mapState('product', ['productData']),
  },
  methods: {
    // 引入category vuex中的方法
    // ...mapActions('category', ['getAllCategoryData']),
    // // 引入peoduct vuex中的方法
    // ...mapActions('product', ['getAllProductData']),
    // 获取所有轮播图的数据
    // async getAllSwipeData() {
    //   let res = await get('/carousel/query', { status: '正常' })
    //   // 将拿到的数据赋值给轮播图数组
    //   this.swipeData = res.data.data
    // },
    ...mapActions('search', ['resetGoodsList']),
    async getAllCategories() {
      await this.axios.get('categories').then(res => {
        this.categoryData = res.data.data
        console.log(res.data);
      }).catch(rej => {
        Toast.fail('获取分类列表失败')
      })
    },
    async getAllGoods() {
      this.loading = true
      await this.axios.get('goods', { params: this.queryInfo }).then(res => {
        console.log('goods', res.data.data.goods);
        this.goodsList = res.data
        this.loading = false
      })
    },
    jumpPS(id, name, index) {
      this.$router.push({
        path: "GoodsServe",
        query: { id, name, index }
      })
    },
    onSearch() {
      this.axios.get('goods', { params: this.queryInfo }).then(res => {
        console.log('goods', res.data.data.goods);
        this.resetGoodsList(res.data.data.goods)
        this.$router.push({
          path: "SearchResult",
          // query:{ goods: res.data.data.goods}
        })
      })
    }
  },
  created() {
    this.getAllCategories()
    this.getAllGoods()
  },
};
</script>

<style scoped>
.home {
  background-color: #f7f7f7;
  height: 100vh;
  overflow: scroll;
}
.header {
  position: relative;
  height: 200px;
  background-image: linear-gradient(90deg, #f85959, #ffc773);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  font-size: 29px;
  font-family: 黑体;
  color: #fff;
  text-align: center;
  padding-top: 5px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header p {
  margin-top: 8px;
  margin-bottom: 10px;
}
.swipe {
  width: 90%;
  /* position: absolute; */
  /* top: -55px; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
  box-shadow: 0 0 10px 0 #aaa;
  border-radius: 8px;
}
/* 设置轮播区域样式 */
.my-swipe,
.my-swipe img {
  width: 100%;
  height: 180px;
  border-radius: 8px;
}
.menu {
  margin-top: 20px;
}
.search {
  margin-top: -10px;
  padding-top: 60px;
  background-color: #fff;
}
.title {
  margin: 0;
  padding: 32px 16px 16px;
  padding-top: 0px;
  padding-left: 18px;
  color: #00000098;
  font-weight: 600;
  font-size: 20px;
  line-height: 16px;
}
::v-deep .van-grid-item__text {
  font-size: 20px;
}
.loading {
  position: absolute;
  margin-top: 30px;
  left: 0;
  right: 0;
}
</style>